import React, { PureComponent } from 'react';
import {ClassifyDetailsStyled} from 'styled/Classify/ClassifyDetailsStyled'
// import {connect} from 'react-redux'
import BScroll from 'better-scroll'


import { Loading } from 'element-react';
import 'element-theme-default';

class ClassifyDetails extends PureComponent {
    constructor(props){
        super(props)
        this.state={
        }
    }
    
    componentDidMount() {
        const wrap = document.querySelector('.detailsItem')
        new BScroll(wrap,{
            click: true,
            scrollY:true
        })
    }
       
    
    render() {  
        return (
            <ClassifyDetailsStyled>
                <div className='detailsItem'>
                    <div className='wrapItem'>
                        {
                            this.props.data.length===0
                            ?<div style={{paddingTop:'2rem'}} className="el-loading-demo">
                                <Loading text="拼命加载中">
                                </Loading>
                            </div>
                            // ?<div></div>
                            :this.props.data.map((v,i)=>{
                                return (
                                    <div className='item' key={i}>
                                        {v.children.length!==0&&<h2>{v.name}</h2>}
                                        {v.children.length!==0&&<div className='group'>
                                            {
                                               v.children.map((item,index)=>{
                                                    return (
                                                        <div key={index} className='one'>
                                                            <img alt="" src={item.image_url?item.image_url:'http://static.jiudoujishi.com/static1/errorImage.jpg'}/>
                                                            <p>{item.name}</p>
                                                        </div>
                                                    )
                                                })
                                            }          
                                        </div>}
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </ClassifyDetailsStyled>
        );
    }
}

// export default connect((state)=>({state}))(ClassifyDetails);
export default ClassifyDetails;
